<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Zoomable TimeSeries</title>


  <link href="../assets/styles.css" rel="stylesheet" />

  <style>
    #chart {
      max-width: 650px;
      margin: 35px auto;
    }
  </style>
</head>

<body>
  <div id="chart">

  </div>


  <script src="../../dist/apexcharts.js"></script>
  <script src="../assets/irregular-data-series.js"></script>

  <script>
    var ts2 = 1484418600000;
    var dates = [];
    var spikes = [5, -5, 3, -3, 8, -8]
    for (var i = 0; i < 120; i++) {
      ts2 = ts2 + 86400000;
      var innerArr = [ts2, dataSeries[1][i].value];
      dates.push(innerArr)
    }

    var options = {
      chart: {
        type: 'area',
        stacked: false,
        height: 380,
        zoom: {
          enabled: true
        },
        toolbar: {
          autoSelected: 'zoom'
        }
      },
      plotOptions: {
        line: {
          curve: 'smooth',

        }
      },
      dataLabels: {
        enabled: false
      },
      series: [{
        name: 'XYZ MOTORS',
        data: dates
      }],
      markers: {
        size: 0,
        style: 'full',
      },
      //colors: ['#0165fc'],
      title: {
        text: 'Stock Price Movement',
        align: 'left'
      },
      fill: {
        gradient: {
          enabled: true,
          shadeIntensity: 1,
          inverseColors: false,
          opacityFrom: 0.35,
          opacityTo: 0,
          stops: [0, 70, 80, 100]
        },
      },
      yaxis: {
        min: 20000000,
        max: 250000000,
        labels: {
          formatter: function (val) {
            return (val / 1000000).toFixed(0);
          },
        },
        title: {
          text: 'Price'
        },
      },
      xaxis: {
        type: 'datetime',
      },

      tooltip: {
        shared: false,
        y: {
          formatter: function (val) {
            return (val / 1000000).toFixed(0)
          }
        }
      }
    }

    var chart = new ApexCharts(
      document.querySelector("#chart"),
      options
    );

    chart.render();
  </script>
</body>

</html>